<%
  use crate::components::icons::Checkmark;
%>
<div data-controller="cards-marketing-slider">
  <div class="card <%- state %>">
    <div class="card-body d-flex flex-column p-0 w-100">
      <img class="img-fluid" src="<%- image %>" alt="feature image">
      <div class="d-flex gap-3 flex-column h-100">
        <h5 class="title"><%- title %></h5>
        <% if bullets.len() > 0 { %>
          <ul class="list-group gap-3">
            <% for bullet in bullets {%>
              <div class="d-flex flex-row align-items-center gap-2">
                <%+ Checkmark::new() %><div class="d-flex align-items-center gap-2"><%- bullet %></div>
              </div>
            <% } %>
          </ul>
        <% } %>
        <% if text.len() > 0 { %>
          <div><%= text %></div>
        <% } %>
        <% if link.len() > 0 {%>
        <a class="link mt-auto btn btn-tertiary goto-arrow-hover-trigger p-0" href="<%- link %>">Learn More <span class="material-symbols-outlined goto-arrow-shift-animation">arrow_forward</span></a>
        <% } %>
      </div>
    </div>
  </div>
</div>
